<template>

</template>

<script lang="ts" setup>
import { ref, computed, unref, reactive, watch, onMounted, nextTick, watchEffect } from "vue";

import { cmsRouteList, cmsPhotoUploadUrl, cmsPhotoDel } from "/@/views/weixin/article/artticle.api";
import { propTypes } from "/@/utils/propTypes";
import type { SelectProps } from 'ant-design-vue';
import { isSpecialChar } from "/@/api/common/api";

interface RouteInfo {
  id: string;
  photos: any;
  traffic: string;
  stay: string;
  breakfast: Number;
  lunch: Number;
  dinner: Number;
  viewspot: string;
  detail: string;
}

//传入参数
const props = defineProps({
  articleId: propTypes.string.def(''),
  days: propTypes.oneOfType([propTypes.string, propTypes.number]),
});

const emit = defineEmits(['change', 'update:value']);

//用餐
const dinnerOptions = ref<SelectProps['options']>([
  { value: "0", label: "自理" },
  { value: "1", label: "包含" },
]);

//行程数据
let cmsRoutes = reactive<any>([])
//短标
let shortMark = reactive<any>([])
//行程图片
let cmsPhotos = reactive<any>([])

//初始化
watch(
  () => props.articleId,
  (visible) => {
    if (visible) {
      nextTick(() => initCmsRoutes())
    }
  },
  {
    deep: true,
    immediate: true
  }
);

/**
 * 监听selectValues变化
 */
watch(
  cmsRoutes,
  () => {
    if (cmsRoutes) {
      emit("change", cmsRoutes);
    }
  },
  {
    deep: true,
    immediate: true
  }
);

// onMounted(async () => {
//   await nextTick(() => {
//     initCmsRoutes();
//   });
// });

/**
 * 行程数据初始化
 */
function initCmsRoutes() {
  //console.info("initCmsRoutes@@", props.articleId)
  var params = {articleId: props.articleId};
  cmsRouteList(params).then((list) => {
    try {
      //实计已录入行程
      let rowsL = list ? list.length : 0;
      let days  = Number(props.days) || 0;
      //如果设置的行程天数据，小于已录入行程，得取设置值显示
      if (days < rowsL) {
        rowsL = days
      }
      //不足天数追加空行程
      let empty: RouteInfo[] = [];
      for (var i = rowsL; i < days ; i++) {
        empty.push({
          id: '',
          photos: [],
          traffic: '',
          stay: '',
          breakfast: 0,
          lunch: 0,
          dinner: 0,
          viewspot: '',
          detail: '',
        });
      }

      //list.push(temp);
      Object.assign(cmsRoutes, list);
      //console.info("cmsRouteList@@", cmsRoutes, empty)

      //短标初始化---------------------------
      let result:any[] = [];
      for (var routes of cmsRoutes) {
        let mark: { trf: string; pla: number }[] = [];
        let traffics = routes.traffic.split(">")
        for (let index = 0; index < traffics.length; index++) {
          if(index == 0) {
            mark.push({
              trf: '',
              pla: traffics[index]
            })
          } else {
            let aa = traffics[index].split(":")
            mark.push({
              trf: aa[0],
              pla: aa[1]
            })
          }
        }
        result.push(mark);
      }
      Object.assign(shortMark, result);

      //短程图片
      let tempPhotos:any[] = [];
      for (var routes of cmsRoutes) {
        tempPhotos.push(routes.photos);
      }
      Object.assign(cmsPhotos, tempPhotos);

    } catch (e) {
      alert("initCmsRoutes: " + e);
      return false;
    }
  })
}

function initPhotos(obj) {
  return unref(obj);
}

//短标 如：南宁 | 南宁>1:三亚>1:北京 = ["南宁"] | ["南宁", "1:三亚", "1:北京"]
let places = reactive<any>([[],[]])
function taffer(traffic) {
  places = traffic.split(">");
}

/**
 * 添加地点 - 点击添加组件
 * @param i
 */
function preparePlace(i) {
  addPlace('','',i);
}

/**
 * 添加地点 - 添加数据
 * @param tl 交通工具
 * @param pla 地点
 */
function addPlace(tl, pla, idx) {
  //交通工具
  shortMark[idx].push({ trf: '', pla: ''});
}

//设置行程短标值
function setTraffic(idx) {
  console.info("setTraffic@@@", idx)
  let trafficShortMark = shortMark[idx], len;
  if (null != trafficShortMark && (len = trafficShortMark.length) > 0 ) {
    let traffic = trafficShortMark[0].pla;
    for (var i = 1; i < len; i++) {
      let pla = trafficShortMark[i].pla;
      if(!pla){
        continue
      }
      //第一项没有交通
      let trf = trafficShortMark[i].trf;
      traffic += ">" + trf + ":" + pla;
      console.info(traffic)
    }
    cmsRoutes[idx].traffic = traffic
  }
}

//规定行程中景点格式，不能字母、数字、特殊字符
function orderViewspot(me) {
  var v = me.value;
  if(!v) return false
  isSpecialChar({ 'text': v }).then((res) => {
    if(!res.success) {
      alert((res['msg']))
    }
  })
}
</script>

<style lang="less" scoped>
@import "../cmsArticle.css";
</style>
